<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue实例的生命周期</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          message: "欢迎登录",
        },
        beforeCreate: function () {
          console.log("1-beforeCreate 初始化之后");
        },
        created: function () {
          console.log("2-created 创建完成");
        },
        beforeMount: function () {
          console.log("3-beforeMount 挂载之前");
        },
        mounted: function () {
          console.log("4-mounted 被创建");
        },
        beforeUpdate: function () {
          console.log("5-beforeUpdate 数据更新前");
        },
        updated: function () {
          console.log("6-updated 被更新后");
        },
        activated: function () {
          console.log("7-activated 组件激活");
        },
        deactivated: function () {
          console.log("8-deactivated 组件失活");
        },
        beforeDestroy: function () {
          console.log("9-beforeDestroy 销毁之前");
        },
        destroyed: function () {
          console.log("10-destroyed 销毁之后");
        },
      });

      vm.$nextTick(()=>{
        console.log("vm.$nextTick");
      })
    </script>
  </body>
</html>
